<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鼠标点击效果</title>

    <style>
        .heart {
            position: fixed;
            opacity: 1;
            scale: 1.2;
            width: 10px;
            height: 10px;
            /* background: red; */
            transform: rotate(45deg);
        }

        .heart:after,
        .heart:before {
            content: "";
            width: inherit;
            height: inherit;
            background: inherit;
            border-radius: 50%;
            position: absolute;
        }

        .heart:after {
            top: -5px;
        }

        .heart:before {
            left: -5px;
        }

        @keyframes move {
            100% {
                transform: translateY(-20px) rotate(45deg);
                opacity: 0;
            }
        }

        .text {
            position: fixed;
            opacity: 1;
            font-size: 14px;
            pointer-events: none;
            animation: moveText 1s normal forwards;
        }

        @keyframes moveText {
            100% {
                transform: translateY(-20px);
                opacity: 0;
            }
        }
    </style>
</head>

<body>
    <script>
        const coreValues = "富强、民主、文明、和谐、自由、平等、公正、法治、爱国、敬业、诚信、友善".split("、");

        window.onclick = function (event) {
            const heart = document.createElement("div")
            document.body.appendChild(heart)
            heart.classList.add("heart")
            heart.style.left = event.clientX + "px"
            heart.style.top = event.clientY + "px"
            heart.style.animation = "move 1s normal forwards"
            setTimeout(function () {
                document.body.removeChild(heart)
            }, 1000)
            heart.style.backgroundColor = "rgb(" + (Math.random() * 255) + "," + (Math.random() * 255) + "," + (Math.random() * 255) + ")"

            const text = document.createElement("div");
            text.classList.add("text");
            text.style.left = event.clientX + "px";
            text.style.top = event.clientY + "px";
            text.style.color = "rgb(" + (Math.random() * 255) + "," + (Math.random() * 255) + "," + (Math.random() * 255) + ")";
            text.textContent = coreValues[Math.floor(Math.random() * coreValues.length)];
            document.body.appendChild(text);

            setTimeout(function () {
                document.body.removeChild(text);
            }, 1000);
        };

    </script>
</body>

</html>